<template>
  <section>
    <span>{{ name }}</span>
    <el-popover placement="right" width trigger="click" ref="popover">
      <i class="el-icon-edit" slot="reference" @click="updateForm = {}"></i>
      <el-form
        :inline="true"
        :model="updateForm"
        class="demo-form-inline updateForm"
        ref="updateForm"
      >
        <el-form-item label prop="abbr">
          <el-input
            v-model.trim="updateForm.abbr"
            placeholder="承运商简称"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="text"
            :loading="loading"
            :disabled="!updateForm.abbr"
            @click="updateShortName()"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-popover>
  </section>
</template>

<script>
import carrier from "@/api/modules/carrier.js";
export default {
  inheritAttrs: true,
  name: "ShortName",
  props: {
    name: {
      type: String
    },
    id: {
      type: Number
    }
  },
  data() {
    return {
      updateForm: { abbr: "" },
      loading: false
    };
  },
  methods: {
    updateShortName() {
      carrier.update(this.id, this.updateForm).then((res) => {
        if (res.code === 0) {
          this.$message.success(res.message);
          this.$emit("handleSearch");
        }
      });
    }
  }
};
</script>
